<script type="text/javascript" src="<?=base_url('js/jquery.color.js')?>"></script>
<script type="text/javascript" src="<?=base_url('js/jquery.Jcrop.js')?>"></script>
<link rel="stylesheet" href="<?=base_url('stylesheets/admin/jquery.Jcrop.css')?>" type="text/css" />
 <script type="text/javascript">

    jQuery(function($){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1
      },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
      });

      function updatePreview(c)
      {
      
		      	$('#x').val(c.x);
				$('#y').val(c.y);
				$('#w').val(c.w);
				$('#h').val(c.h);

        if (parseInt(c.w) > 0)
        {
          var rx = 200 / c.w;
          var ry = 200 / c.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };

    });
	
	function checkCoords()
			{
				if (parseInt($('#w').val())) return true;
				alert('Please select a crop region then press submit.');
				return false;
			};

  </script>

<div class="container">
<h3>Your file was successfully uploaded!</h3>

<ul>

</ul>
<img src="<?=base_url('uploads').'/'.$upload_data['file_name']?>"  id="target"/>
<div style="width:200px;height:200px;overflow:hidden;">
            <img src="<?=base_url('uploads').'/'.$upload_data['file_name']?>" id="preview" alt="Preview" class="jcrop-preview" />
          </div>
<!-- This is the form that our event handler fills -->
		<form action="<?=site_url('admin/gallery/crop')?>" method="post" onsubmit="return checkCoords();">
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />
			<input type="hidden" id="filename" name="filename" value="<?=$upload_data['file_name']?>"/>
			<input type="submit" value="Crop Image" />
		</form>

<p><?=anchor('admin/gallery/upload', 'Upload Another File!'); ?></p>
</div>
	</body>
</html>